<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .a{
      width: 200px;
      border: 1px solid red;
      box-sizing: border-box;
  }
  .c{
      width: 115px;
      border: 1px solid blue;
      box-sizing: border-box;
      transform-origin: left top;
      transform: rotate(63deg);
  }
  .d{
      width: 115px;
      margin-left: 85px;
      border: 1px solid yellowgreen;
      box-sizing: border-box;
      transform-origin: 115px 0;
      transform: rotate(-117deg);
  }
  .b{
      width: 200px;
      margin-top: 100px;
      margin-left: 50px;
      border: 1px solid red;
      box-sizing: border-box;
  }
.path{
    width: 250px;
    height: 200px;
    background: lime;
    /*按象限方向*/
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
}
.skew{
    width: 200px;
    height: 100px;
    background: lightblue;
    /*skew() 函数定义了一个元素在二维平面上的倾斜转换 第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。*/
    transform: skew(-20deg, 0)
}
</style>
<!--
方式一：四个div旋转
方式二：clip-path
方式三：transform skew 特性 将矩形旋转  第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。
-->
<body>
<div class="a"></div>
<div class="c"></div>
<div class="d"></div>
<div class="b"></div>
<div class="path"></div>
<div class="skew"></div>
</body>
</html>
